<template>
  <view class="qiuqian-wrapper" v-if="isShowMsg === 'Y'">
    <image class="my-bg" src="https://ai-sbbs.xyz/api/profile/upload/2024/07/01/216ecf4ef90549a1b0d6b8cd648786f9.png"
      mode="scaleToFill" />

    <view class="record-content">
<!--      <tui-form ref="form">-->
        <tui-list-cell padding="0" :hover="false">
          <view class="tui-list-cell tui-list-cell-name">
            <view class="left-label">姓名</view>
            <view class="tui-content">
              <tui-input backgroundColor="none" color="#666" size="26rpx" padding="6rpx 0" :borderBottom="false"
                textRight v-model="baseFormData.name" placeholder="请输入姓名"></tui-input>
<!--              <input v-model="baseFormData.name" placeholder="请输入姓名"></input>-->
            </view>
          </view>
        </tui-list-cell>

        <tui-list-cell padding="0" :hover="false" :arrow="true" @click="handerSelect(sexsList, 'sex')">
          <view class="tui-list-cell">
            <view class="left-label">性别</view>
            <view class="tui-content">{{ baseFormData.sex == 0 ? '男' : '女' }}</view>
          </view>
        </tui-list-cell>

        <tui-list-cell padding="0" :hover="false" :arrow="true" @click="handerSelect(typeDateList, 'type')">
          <view class="tui-list-cell">
            <view class="left-label">日期类型</view>
            <view class="tui-content">{{ baseFormData.type == 0 ? '农历' : '公历' }}</view>
          </view>
        </tui-list-cell>

        <tui-list-cell padding="0" :hover="false" :arrow="true" @click="handerClickDate">
          <view class="tui-list-cell">
            <view class="left-label">出生日期</view>
            <view class="tui-content">{{ baseFormData.fullDateTime || '请选择日期' }}</view>
          </view>
        </tui-list-cell>

        <!-- <tui-list-cell
          padding="0"
          :hover="false"
          :arrow="true"
          @click="handerSelect(zhenList,'zhen')"
        >
          <view class="tui-list-cell">
            <view class="left-label">是否考虑真太阳时</view>
            <view class="tui-content">{{baseFormData.zhen==1?'考虑':'不考虑'}}</view>
          </view>
        </tui-list-cell>-->

        <tui-list-cell padding="0" :hover="false" :arrow="true" v-if="baseFormData.zhen == 1"
          @click="handerSelect(cityData, 'fullLocation')">
          <view class="tui-list-cell">
            <view class="left-label">出生地区</view>
            <view class="tui-content">{{ baseFormData.fullLocation || '请选择地区' }}</view>
          </view>
        </tui-list-cell>

        <tui-list-cell padding="0" :hover="false" :arrow="true" @click="handerSelect(sectList, 'sect')">
          <view class="tui-list-cell">
            <view class="left-label">流派</view>
            <view class="tui-content">{{ baseFormData.sect == 1 ? '晚子时日柱算明天' : '晚子时日柱算当天' }}</view>
          </view>
        </tui-list-cell>
<!--      </tui-form>-->

      <tui-form-button style="margin-top:20px;padding:0 10px;box-sizing: border-box" radius="50px" background="#c09351"
        @click="handerClick">立即排盘</tui-form-button>
    </view>

    <!-- <tui-select
      maskClosable
      textField="text"
      valueField="value"
      :list="selectList"
      :show="showSelect"
      @confirm="handerConfirm"
      @close="handerOnClose"
    ></tui-select>-->

    <tui-datetime ref="dateTime" type="1" @confirm="changeDate"></tui-datetime>

    <tui-picker :layer="layer" :show="showSelect" :pickerData="selectList" @hide="handerOnClose"
      @change="handerConfirm"></tui-picker>

    <!-- <tui-picker
      mode="multiSelector"
      :layer="3"
      :show="showSelect"
      :pickerData="selectList"
      @hide="handerOnClose"
      @change="handerConfirm"
    ></tui-picker>-->

    <tui-toast ref="toast"></tui-toast>
  </view>
</template>

<script>
import cityData from "@/utils/city.js";
import showPage from '@/utils/showPage'



export default {
  mixins: [showPage],
  data() {
    return {
      currentFlag: null,
      baseFormData: {
        name: "",
        sex: 0,

        type: 1, // 0农历  1公历
        zhen: 2, // 是否真太阳时 例：1：考虑真太阳时 2：不考虑真太阳时
        sect: 1, // 流派 例：1：晚子时日柱算明天 2：晚子时日柱算当天

        fullLocation: "",
        province: null,
        city: null,

        fullDateTime: null,
        year: null,
        month: null,
        day: null,
        hours: null,
        minute: null
      },
      layer: 1,
      showSelect: false,
      selectFlag: null,
      selectList: [],
      sexsList: [
        {
          text: "男",
          value: 0
        },
        {
          text: "女",
          value: 1
        }
      ],
      // 日期类型
      typeDateList: [
        {
          text: "农历",
          value: 0
        },
        {
          text: "公历",
          value: 1
        }
      ],
      cityData: cityData,

      // 流派
      sectList: [
        {
          text: "晚子时日柱算明天",
          value: 1
        },
        {
          text: "晚子时日柱算当天",
          value: 2
        }
      ],

      zhenList: [
        {
          text: "考虑",
          value: "1"
        },
        {
          text: "不考虑",
          value: "2"
        }
      ],
      isShow: '',

    };
  },
  onLoad(option) {
    this.currentFlag = option.flag;
  },
  onShow() { },
  methods: {
    handerSelect(list, flag) {
      this.selectList = JSON.parse(JSON.stringify(list));
      this.selectFlag = flag;
      if (flag == "fullLocation") {
        this.layer = 3;
      } else {
        this.layer = 1;
      }
      this.showSelect = true;
    },
    handerConfirm(e) {
      if (this.selectFlag == "fullLocation") {
        this.baseFormData.fullLocation = e.result;
        this.baseFormData.province = e.text[0];
        this.baseFormData.city = e.text[2];
        this.showSelect = false;
      } else {
        this.baseFormData[this.selectFlag] = e.value;
        this.showSelect = false;
      }
    },
    handerOnClose() {
      this.showSelect = false;
    },

    handerClickDate() {
      this.$refs.dateTime && this.$refs.dateTime.show();
    },
    changeDate(e) {
      this.baseFormData.fullDateTime = e.result;
      this.baseFormData.year = parseInt(e.year);
      this.baseFormData.month = parseInt(e.month);
      this.baseFormData.day = parseInt(e.day);
      this.baseFormData.hours = parseInt(e.hour);
      this.baseFormData.minute = parseInt(e.minute);
    },

    async handerClick() {
      let mynavData = JSON.stringify(this.baseFormData); // 这里转换成 字符串
      if (!this.baseFormData.year) {
        let params = {
          title: "出生日期不能为空"
        };
        return this.$refs.toast && this.$refs.toast.show(params);
      }

      if (!this.baseFormData.name) {
        let params = {
          title: "姓名不能为空"
        };
        return this.$refs.toast && this.$refs.toast.show(params);
      }
      if (this.currentFlag == 5) {
        uni.navigateTo({
          url: "/pqgeInfo/ziwei/ziwei?baseFormData=" + mynavData
        });
      } else if (this.currentFlag == 1) {
        uni.navigateTo({
          url: "/pqgeInfo/bazipaipan/bazipaipan?baseFormData=" + mynavData
        });
      }
    }
  }
};
</script>

<style lang="scss">
.qiuqian-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  background: #f6f6f6;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;

  .my-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }

  .record-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    // background: #fff;
    // padding: 12px;
    position: relative;
    z-index: 1;

    .tui-list-cell {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx 60rpx 24rpx 30rpx;
      box-sizing: border-box;
      font-size: 30rpx;
      position: relative;
      background: none !important;

      &.tui-list-cell-name {
        padding: 17rpx 20rpx 17rpx 30rpx;
      }

      .left-label {
        font-size: 26rpx;
        color: #666;
      }

      .tui-cell__line {
        border-bottom: none !important;
      }

      .file_input {
        position: absolute;
        z-index: 1;
        opacity: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
    }
  }
}
</style>
